<template>
    <div class="mallDetails">
        <div class="imgsBox" >
            <swiper :options="swiperOption" class="swiper-wrap"  ref="mySwiper" v-if="imgs.length!=0">
                <swiper-slide v-for="(item,index) in imgs" :key="index" >
                    <img :src="item" alt="" />
                </swiper-slide>
                <!-- 常见的小圆点 -->
            </swiper>
            <!-- 显示数字 -->
            <div class="number">{{imgIndex}}/{{imgs.length}}</div>
        </div>
        <div class="goodsInfoWrapper">
            <div class="title">{{title}}</div>
            <div class="priceContent">
                <span class="price">&yen;{{discount}}</span>
                <span class="originPrice">原价：&yen;{{price}}</span>
                <span class="indexNum">已售：{{sales}}件</span>
            </div>
        </div>
        <div class="skuWrapper">
            <div class="skuInfo" @click="DetailsSkuBtn">
				<div class="mySite" v-if="!skuId">请选择规格参数</div>
				<div class="mySite" v-if="skuId">
					<span v-for="(s,sIndex) in selectedSku" :key="sIndex">
						<span v-if="s!=null">{{s}};</span>
					</span>
					数量{{skuNum}}
				</div>
				<div class="iconMyRight"></div>
			</div>
			<div class="skuInfo" @click="detailParameterBtn">
				<div class="mySite">参数</div>
				<div class="iconMyRight"></div>
			</div>
        </div>
        <div class="goodsDetail">
            <div class="mallDetailsImg" v-for="(item,indexImg) in details" :key="indexImg">
                <img :src="item" mode="widthFix">
            </div>
        </div>
        <div class="buyBtnWrapper" @click="goPerfect">立即购买</div>

        <div class="layerMaskPopup" v-if="detailsSkuShow">
            <div class="mallDetailsSku">
                <div class="goodsSkuInfoBox">
                    <img :src="skuImg">
                    <div class="iconDetailsSkuX" @click="detailsSkuShowFalse"></div>
                    <div class="info">
                        <div class="detailsSkuMoney">&yen;{{discount}}</div>
                        <div class="detailsSkuNum">
                            已选:
                            <span v-for="(s,sIndex) in selectedSku" :key="sIndex">
                                <span v-if="s!=null">{{s}},</span>
                            </span>
                            数量{{skuNum}}</div>
                        
                    </div>
                </div>

                <div class="skuItem" v-for="(skuItem,skuItemIndex) in skuColor" :key="skuItemIndex">
                    <div class="detailsSkuColor">{{skuItem.name}}</div>
                    <div class="detailsSkuColorTrue" v-for="(skuColorItem,colorIndex) in skuItem.value" :key="colorIndex">
                        <div @click="btnColorOk(skuColorItem,skuItemIndex)" :class="{'TrueColor':selectedSku[skuItemIndex]==skuColorItem}">{{skuColorItem}}</div>
                    </div>
                    <div style="clear:both;"></div>
                </div>
                <div class="skuNumBox">
				    <div class="detailsSkuColor">数量</div>
                    <div class="detailsSkuAdd">
                        <span @click="skuNumMin" style="border-right: none;">-</span>
                        <span class="skuNum">{{skuNum}}</span>
                        <span @click="skuNumAdd" style="border-left: none;">+</span>
                    </div>
                </div>
                <div class="buyBtnWrapper" @click="goPerfect">立即购买</div>
            </div>
        </div>

        <div class="layerMaskPopup" v-if="detailParameterShow">
            <div class="mallDetailParameter">
                <div class="parameterContent">
                    <div class="mallDetailParameterTop">产品参数</div>
                    <div class="paramsWrapper">
                        <div v-for="(paramsItem,paramsIndex) in paramsList" :key="paramsIndex">
                            <div class="paramsItem">
                                <div class="mallDetailParameterTitle">{{paramsItem.name}}</div>
                                <div class="mallDetailParameterTitleTwo">{{paramsItem.value}}</div>
                                <div style="clear: both;"></div>
                            </div>
                        </div>
                    </div>
                    <div class="mallDetailsBtn" @click="detailParameterFalse">确定</div>
                </div>
            </div>
        </div>

        <div class="toast" v-show="toastShow">
        {{toastText}}
        </div>
    </div>
</template>

<script>    
import {ajax, itemInfo, itemSku, confirmTradeH5} from '../../data/wap-service.js'
import { swiper, swiperSlide } from "vue-awesome-swiper";
require("swiper/dist/css/swiper.css");
export default {
    components: {
        swiper,
        swiperSlide
    },

    mixins:[ajax],

    data(){
        const that = this;
        return {
            sharerToken: '',
            itemId: '',
            // back:"https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx83792fa3cfd6fae2&redirect_uri=https://xcxmall.cailifu.net/wxlogin.htm&response_type=code&scope=snsapi_base&state=http%3A%2F%2F192.168.1.88%3A1026%2FmallDetails%3FitemId%3D20%26sharer%3D65ea88aee2284f92891dcaf50aae937c&connect_redirect=1",
            // title: '卫衣男连帽加绒潮牌日系帽衫男生宽松带帽男士卫衣秋冬款套头外套',
            // discount: 78,
            // price: 156,
            // sales: 550,
            title: '',
            discount: '',
            price: '',
            sales: '',
            // imgs: ['https://img.alicdn.com/bao/uploaded/i2/2582958979/O1CN01YQCzcb2GCQndKkgyA_!!2582958979.jpg', 'https://img.alicdn.com/bao/uploaded/i3/2582958979/O1CN01pF0jyw2GCQnnaROgQ_!!2582958979.jpg', 'https://img.alicdn.com/bao/uploaded/i2/2582958979/O1CN01X85XnO2GCQnkhhlSO_!!2582958979.jpg'],
            imgs: [],
            imgIndex: 1,
            skuId: '',
            selectedSku: [],
            skuNum: 1,
            paramsList:[],
            // details: ["https://cailifu.oss-cn-hangzhou.aliyuncs.com/wapup/20191/MWbEprX6XSHhxMM7EYQPZjmkk5xnr82C.jpg","https://cailifu.oss-cn-hangzhou.aliyuncs.com/wapup/20191/n2ZtH2fNnW6z4GQRZpyXMZdnxdnTKxsF.jpg","https://cailifu.oss-cn-hangzhou.aliyuncs.com/wapup/20191/dp4ffXxwXNrQmy5CtZkxHQMQWKie2RDz.jpg","https://cailifu.oss-cn-hangzhou.aliyuncs.com/wapup/20191/3GH67hFr6TWf5ySeGmEYXbz7Q3E4Ha7P.jpg","https://cailifu.oss-cn-hangzhou.aliyuncs.com/wapup/20191/kG5mxfrk4xaAWQRfX7PBc33R77mzePc3.jpg"],
            details:[],

            detailsSkuShow: false,
            detailParameterShow: false,
            skuColor: [],
            skuMap: {},

            swiperOption: {
                notNextTick: true,
                loop: false,
                initialSlide: 0,
                speed: 800,
                direction: "horizontal",
                grabCursor: true,
                on: {
                    slideChangeTransitionStart: function() {
                    /* realIndex为滚动到当前的slide索引值 */
                        that.imgIndex = this.realIndex + 1;
                    }
                }
            },

            toastShow: false,
            toastText: ''
        }
    },

    created(){
        this.getLinkParams()
        this.getItemInfo()
    },

    computed:{
        skuImg(){
            return this.imgs[0]
        }
    },

    methods:{
        getLinkParams(){
            this.itemId = this.$route.query.itemId
            this.sharerToken = this.$route.query.sharer
        },

        getItemInfo(){
            if(!this.itemId){
                return this.toast('链接已失效')
            }
            this.doajax(itemInfo, {itemId: this.itemId}, function(res){
                this.title = res.title;
                this.imgs = res.imgs;
                this.price = res.price;
                this.discount = res.discount;
                this.paramsList = JSON.parse(res.params);
                this.sales = res.sales;
                this.details = res.details;
            })
        },

        DetailsSkuBtn(){
            this.detailsSkuShow = true;
            this.getSkuInfo();
        },

        getSkuInfo(){
            if(!this.skuColor.length){
                this.doajax(itemSku, {itemId: this.itemId}, function(res){
                    let data = [];
                    this.skuList = JSON.parse(res.skuJson); //转换成obj对象
                    let skuObj = res.sku;
                    for (let i = 0; i < this.skuList.length; i++) {
                        let obj = this.skuList[i];
                        let item = {};
                        item.name = obj.name;
                        item.value = obj.value.split(",");
                        data.push(item);
                        //如果sku的单个选项只有一个，让它默认选中
                        if (item.value.length == 1) {
                            this.selectedSku[i] = item.value[0];
                            let str = this.selectedSku.join(",");
                            if(skuObj[str]){
                                this.skuId = skuObj[str];
                            }
                        }
                    }
                    this.skuColor = data;
                    this.skuMap = skuObj
                });
            }

            // let res ={
            //     "sku":{"竖条纹,S":151034,"竖条纹,XL":151037,"竖条纹,XS":151033,"竖条纹,M":151035,"竖条纹,L":151036},
            //     "skuJson":"[{\"name\":\"颜色\",\"value\":\"竖条纹\"},{\"name\":\"尺码\",\"value\":\"XS,S,M,L,XL\"}]"
            // } 
            // let data = [];
            // this.skuList = JSON.parse(res.skuJson); //转换成obj对象
            // let skuObj = res.sku;
            // for (let i = 0; i < this.skuList.length; i++) {
            //     let obj = this.skuList[i];
            //     let item = {};
            //     item.name = obj.name;
            //     item.value = obj.value.split(",");
            //     data.push(item);
            //     //如果sku的单个选项只有一个，让它默认选中
            //     if (item.value.length == 1) {
            //         this.selectedSku[i] = item.value[0];
            //     }
            // }
            // this.skuColor = data;
            // this.skuMap = res.sku
        },

        detailsSkuShowFalse(){
            this.detailsSkuShow = false;
        },

        btnColorOk(skuColorItem, index) {
            try{
                let select = this.selectedSku[index];
                this.$set(this.selectedSku,index,skuColorItem);
                let str = this.selectedSku.join(",");
                this.skuId = this.skuMap[str];
            }catch(err){
            }
        },

        detailParameterBtn(){
            this.detailParameterShow = true
        },

        detailParameterFalse(){
            this.detailParameterShow = false
        },

        skuNumMin(){
            this.skuNum--;
            if (this.skuNum == 0) {
                this.skuNum = 1
            }
        },

        skuNumAdd(){
            this.skuNum++
        },

        goPerfect(){
            let str = this.selectedSku.join(",");
            this.skuId = this.skuMap[str];
            if (this.skuId === '' || this.skuId === undefined) {
                // this.toast('请选择规格参数');
                this.getSkuInfo()
                this.detailsSkuShow = true;
                return;
            }
        
            this.doajax(confirmTradeH5, {
                itemId: this.itemId,
                sharerToken: this.sharerToken,
                skuId: this.skuId,
                num: this.skuNum
            }, (res) => {
                this.$router.push({
                    path: '/share/mallDetailsPerfecth5/'+res.tradeCode
                });
            })
        },

       toast(str) {
            let v = this
            v.toastText = str
            v.toastShow = true
            setTimeout(function(){
                v.toastShow = false
            }, 1500)

        }
    }
    
}
</script>

<style>
body{margin:0;}
.mallDetails{background: #f2f2f2;}
.mallDetails .imgsBox{width: 7.5rem; height: 7.5rem; position: relative;}
.mallDetails .imgsBox img{max-width: 7.5rem; max-height: 7.5rem;}
.mallDetails .imgsBox .number{position: absolute; right: .3rem; bottom: .3rem; width: .8rem; height: .4rem; line-height: .4rem; border-radius: .1rem; background: #ffffff; text-align: center; color: #FF0040; font-size: .28rem; z-index: 10;}
.mallDetails .goodsInfoWrapper{padding: .2rem .3rem .3rem .2rem; background: #ffffff; margin-bottom: .3rem}
.mallDetails .goodsInfoWrapper .title{font-size: .32rem; line-height: .48rem; margin-bottom: .2rem;}
.mallDetails .goodsInfoWrapper .priceContent{font-size: 0rem;}
.mallDetails .goodsInfoWrapper .priceContent .price{font-size: .36rem; color: #FF0040; margin-right: .4rem;}
.mallDetails .goodsInfoWrapper .priceContent .originPrice{font-size: .24rem; color: #999999; text-decoration: line-through;}
.mallDetails .goodsInfoWrapper .priceContent .indexNum{float:right; font-size: .24rem; color: #999999; margin-top:.12rem;}

.mallDetails .skuWrapper{background: #ffffff; margin-bottom: .3rem;}
.mallDetails .skuWrapper .skuInfo{border-bottom: .01rem solid #f2f2f2; overflow: hidden; padding: .3rem .2rem}
.mallDetails .skuWrapper .skuInfo:last-child{border-bottom: none;}
.mallDetails .skuWrapper .mySite {font-size: .28rem; font-weight: 500; color: rgba(51, 51, 51, 1); float: left;}
.mallDetails .skuWrapper .skuInfo .iconMyRight{float:right; width: .16rem; height: .3rem; background: url(../../assets/iconMyRight.png) no-repeat; background-size: .16rem .3rem;}

.mallDetails .goodsDetail{background: #ffffff; padding-bottom: 1rem;}
.mallDetails .goodsDetail .mallDetailsImg{text-align: center;}
.mallDetails .goodsDetail .mallDetailsImg img{max-width: 7.5rem;}

.mallDetails .buyBtnWrapper{position:fixed; bottom: 0; left: 0; width: 100%; height: 1rem; line-height: 1rem; font-size: .36rem; color: #ffffff; text-align: center; background: #FF0040;}

.mallDetails .buyBtnWrapper span{font-size: .29rem;}

.mallDetails .mallDetailsSku{position:fixed; bottom: 0; left: 0; width: 100%; height: 8rem; z-index: 100; overflow: auto; background: #ffffff}
.mallDetails .mallDetailsSku .goodsSkuInfoBox{padding:.3rem .2rem .2rem; position:relative; overflow: hidden;}
.mallDetails .mallDetailsSku .goodsSkuInfoBox img{max-width: 1.2rem; max-height: 1.2rem; float:left;}
.mallDetails .mallDetailsSku .goodsSkuInfoBox .iconDetailsSkuX{position:absolute; right: .3rem; top:.3rem; width: .3rem; height: .3rem; background: url(../../assets/iconTClose.png) no-repeat; background-size: .3rem .3rem;}
.mallDetails .mallDetailsSku .goodsSkuInfoBox .info{float:left; margin-left: .2rem; margin-top: .26rem;}
.mallDetails .mallDetailsSku .goodsSkuInfoBox .detailsSkuMoney{font-size: .36rem; color: #FF0040; margin-bottom: .1rem;}
.mallDetails .mallDetailsSku .goodsSkuInfoBox .detailsSkuNum{font-size: .24rem;}

.mallDetails .mallDetailsSku .detailsSkuColor {font-size: .28rem; font-weight: 500; color: rgba(51, 51, 51, 1); padding: .4rem 0 0 .2rem;}
.mallDetails .mallDetailsSku .skuItem .detailsSkuColorTrue>div {border: .01rem solid rgba(204, 204, 204, 1); float: left; color: #999999; font-weight: 500; font-size: .24rem; padding: .1rem .2rem; margin: .2rem .2rem 0 .2rem;}
.mallDetails .mallDetailsSku .skuItem .detailsSkuColorTrue .TrueColor{color: #FF0040 !important; border: .01rem solid #FF0040 !important;}
.mallDetails .mallDetailsSku .skuNumBox{overflow: hidden; padding-bottom:1rem;}
.mallDetails .mallDetailsSku .detailsSkuAdd {float: left; padding: .2rem 0 .6rem .2rem; overflow:hidden;}
.mallDetails .mallDetailsSku .detailsSkuAdd span {font-size: .36rem; float:left; color: #999999; padding: 0 .2rem; border: .01rem solid rgba(204, 204, 204, 1);}
.mallDetails .mallDetailsSku .detailsSkuAdd span.skuNum{padding:0 .4rem; color: #FF0040}

.mallDetailParameter{position:relative; height: 100%;}
.mallDetailParameter .parameterContent{position:absolute; width: 100%; bottom: 0; left: 0; background: #fff; height: 8rem; padding-bottom: 1rem;}
.mallDetailParameter .parameterContent .mallDetailParameterTop {font-size: .32rem; font-weight: 500; color: rgba(51, 51, 51, 1); text-align: center; padding: .3rem 0 .5rem 0;}
.mallDetailParameter .parameterContent .paramsItem{margin-top: .3rem; border-bottom: .01rem #F2F2F2 solid; height: auto; width: 100%; padding-bottom: .3rem;}
.mallDetailParameter .parameterContent .mallDetailParameterTitle {font-size: .32rem; font-weight: 500; width: 1.28rem; color: rgba(51, 51, 51, 1); padding: 0 .8rem 0 .2rem; float: left; overflow:hidden;}
.mallDetailParameter .parameterContent .mallDetailParameterTitleTwo {font-size: .32rem; width: 5.22rem; font-weight: 500; float: left; color: #999999; overflow:hidden;}
.mallDetailParameter .parameterContent .mallDetailsBtn{font-size:.36rem; position:absolute; bottom:0; left: 0; width: 100%; height: 1rem; line-height: 1rem; background: #FF0040; color: #ffffff; text-align: center;}
.mallDetailParameter .parameterContent .paramsWrapper{overflow: auto; height: 6.7rem; padding-bottom: 1.3rem;}


.layerMaskPopup{position:fixed; top:0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,.2); z-index:100;}


.toast {
    position: fixed;
    z-index: 2000;
    left: 50%;
    top:45%;
    transition:all .5s;
    -webkit-transform: translateX(-50%) translateY(-50%);
        -moz-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
            -o-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
    text-align: center;
    border-radius: .05rem;
    color:#FFF;
    background: rgba(17, 17, 17, 0.7);
    height: .45rem;
    line-height: .45rem;
    padding: 0 .15rem;
    max-width: 3.50rem;
    font-size: .28rem;
}
</style>
